<template>
    <!-- 单根 -->
    <div>
        <el-row>
            <el-col :span="statisticSpan">
                <el-card v-loading="statisticDataLoading">
                    <el-statistic :value="statisticData.appCount" :value-style="statisticValueStyle">
                        <template #title>
                            <el-text>应用</el-text>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
            <el-col :span="statisticSpan">
                <el-card v-loading="statisticDataLoading">
                    <el-statistic title="文章" :value="statisticData.articleCount" :value-style="statisticValueStyle">
                        <template #title>
                            <el-text>文章</el-text>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
            <el-col :span="statisticSpan">
                <el-card v-loading="statisticDataLoading">
                    <el-statistic :value="statisticData.todayArticleCount" :value-style="statisticValueStyle">
                        <template #title>
                            <el-text>今日新增文章</el-text>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
            <el-col :span="statisticSpan" v-if="checkPermission('article:write')">
                <el-card v-loading="statisticDraftLoading">
                    <el-statistic :value="statisticDraftCount"
                                  :value-style="[statisticValueStyle,statisticValueStyleGreen]">
                        <template #title>
                            <el-text>草稿箱</el-text>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
            <el-col :span="statisticSpan">
                <el-card v-loading="statisticData4AdminLoading" v-if="checkPermission('statistic:list4Admin')">
                    <el-statistic :value="statisticData4Admin.onlineUserCount"
                                  :value-style="statisticValueStyle">
                        <template #title>
                            <el-text>在线人数</el-text>
                        </template>
                    </el-statistic>
                </el-card>
            </el-col>
        </el-row>
        <el-divider/>
        <el-card style="max-width:400px; text-align: left">
            <template #header>
                <div class="card-header">
                    <span>近期操作记录</span>
                </div>
            </template>
            <!--            <el-timeline style="max-width: 400px">-->
            <!--                <el-timeline-item :timestamp="'2018-04-16'">-->
            <!--                    退出登录-->
            <!--                </el-timeline-item>-->
            <!--                <el-timeline-item :timestamp="'2018-04-15'">-->
            <!--                    登录-->
            <!--                </el-timeline-item>-->
            <!--            </el-timeline>-->
            <el-text size="large">
                开发中
            </el-text>
        </el-card>
    </div>
</template>

<script setup lang="ts">

import {computed, CSSProperties, inject, onMounted, Ref, ref} from "vue";
import {myAxios} from "../assets/ts/my-axios";
import {ElMessage} from "element-plus";
import {checkPermission} from "../assets/ts/permission-util";

// 生命周期 - 挂载
onMounted(() => {
    loadStatisticData()
    loadStatisticData4Admin()
    loadStatisticDraft()
})

// 统计数据的样式
const statisticValueStyle: CSSProperties = {
    fontSize: '30px',
}
const statisticValueStyleGreen: CSSProperties = {
    color: 'green',
}

// 统计数据
const statisticData = ref({
    appCount: 0,
    articleCount: 0,
    todayArticleCount: 0,
})

// 统计数据 加载状态
const statisticDataLoading = ref(false)

// API获取统计数据
function loadStatisticData() {
    statisticDataLoading.value = true
    let params = {
        statisticKeys: ['appCount', 'articleCount', 'todayArticleCount'] + ''
    }
    myAxios.get('/statistic/list', {params: params})
        .then((response) => {
            if (response.data.code == 0) {
                statisticData.value.appCount = response.data.data['appCount']
                statisticData.value.articleCount = response.data.data['articleCount']
                statisticData.value.todayArticleCount = response.data.data['todayArticleCount']
            } else {
                ElMessage.error(response.data.message)
            }
        })
        .finally(() => {
            statisticDataLoading.value = false
        })
}

// 草稿箱统计
const statisticDraftLoading = ref(false)
const statisticDraftCount = ref(0)

// API获取草稿箱数据
function loadStatisticDraft() {
    if (checkPermission('article:write')) {
        statisticDraftLoading.value = true
        myAxios.get('/article/draft-count')
            .then((response: any) => {
                if (response.data.code == 0) {
                    statisticDraftCount.value = response.data.data
                } else {
                    ElMessage.error(response.data.message)
                }
            })
            .finally(() => {
                statisticDraftLoading.value = false
            })
    }
}

// 管理员才能看的统计数据
const statisticData4Admin = ref({
    onlineUserCount: 0,
})
const statisticData4AdminLoading = ref(false)

// API获取统计数据
function loadStatisticData4Admin() {
    if (checkPermission('statistic:list4Admin')) {
        statisticDataLoading.value = true
        let params = {
            statisticKeys: ['onlineUserCount'] + ''
        }
        myAxios.get('/statistic/list4admin', {params: params})
            .then((response) => {
                if (response.data.code == 0) {
                    statisticData4Admin.value.onlineUserCount = response.data.data['onlineUserCount']
                } else {
                    ElMessage.error(response.data.message)
                }
            })
            .finally(() => {
                statisticDataLoading.value = false
            })
    }
}

// 依赖驻入 - 竖屏
const verticalScreen: Ref<boolean> = inject('verticalScreen', ref(false))

// 单统计项占栅格数
const statisticSpan = computed(() => {
    return verticalScreen.value ? 12 : 6
})


</script>

<style scoped>

.el-card {
    margin: 10px 10px;
}

</style>